<template>
	<view class="body prel">
		<image mode="widthFix" class="bg" src="../../static/images/bg.png"></image>
		<view class="w100 flex flex_jc" style="margin-top: 100rpx;">
			<view class="tool flex flex_wrap w710">
				<view class="tool1 flex flex_ac w100 flex_jsb">
					<view class="share_box flex flex_jc">
						<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
							open-type="share" class="share flex flex_jc flex_ac">
							<u-icon color="#fff" size="40rpx" name="share-square"></u-icon>
							<view class="sharetxt">邀朋友一起玩</view>
						</button>
					</view>
					<view class="guanka ml20">当前分数：{{totalScore}}</view>
					<view class="guanka ml20">目标：{{targetScore}}</view>
				</view>
				<view class="tool2 mt20 w100 flex flex_ac">
					<view class="greate_score flex flex_wrap flex_ac">
						<button @click="setting_window_open()" hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100">
							<image mode="widthFix" class="btnset" src="../../static/images/btnSet.png"></image>
						</button>
						<view class="total_score ml20">关卡：{{pass}}</view>
						
						<view class="greate_line_box flex w100 flex_ac">
							<view class="fz25 greate_top mr10">历史最高</view>
							<view class="greate_line flex flex_ac fz25 prel">
								<view class="greate2_line"
									:style="{width:greate2_line_p+'%'}">
								</view>
								<view style="z-index: 2;" class="mr10">{{greate_score}}</view>
							</view>
						</view>
					</view>
					<view class="daoju_list flex flex_ac flex_jsa">
						<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100">
							<image mode="widthFix" style="width: 72rpx;" src="../../static/images/start/btnHs.png"></image>
						</button>
						<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100" @click="useBoom()">
							<view class="prel daoju_box">
								<view v-show="daoju_boom_num>3" class="daoju_num">{{daoju_boom_num}}</view>
								<image v-show="daoju_boom_num==1"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/count1.png"></image>
								<image v-show="daoju_boom_num==2"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/count2.png"></image>
								<image v-show="daoju_boom_num==3"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/count3.png"></image>
								<image v-show="daoju_boom_num<=0" 
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/advideo.png"></image>
								<image 	mode="widthFix" 
										class="daoju" 
										:class="is_boom?'scaleElement':''" 
										src="../../static/images/boom.png"></image>
							</view>
						</button>
						
						<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100" @click="useShuazi()">
							<view class="prel daoju_box">
								<view v-show="daoju_shuazi_num>3" class="daoju_num">{{daoju_shuazi_num}}</view>
								<image v-show="daoju_shuazi_num==1"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/count1.png"></image>
								<image v-show="daoju_shuazi_num==2"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/count2.png"></image>
								<image v-show="daoju_shuazi_num==3"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/count3.png"></image>
								<image v-show="daoju_shuazi_num<=0"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/advideo.png"></image>
								<image 	mode="widthFix" 
										class="daoju" 
										:class="is_shuazi?'scaleElement':''" 
										src="../../static/images/shuazi.png"></image>
							</view>
						</button>
						
						
						<button hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100" @click="useChongzhi()">
							<view class="prel daoju_box">
								<view v-show="daoju_chongzhi_num>3" class="daoju_num">{{daoju_chongzhi_num}}</view>
								<image v-show="daoju_chongzhi_num==1"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/count1.png"></image>
								<image v-show="daoju_chongzhi_num==2"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/count2.png"></image>
								<image v-show="daoju_chongzhi_num==3"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/count3.png"></image>
								<image v-show="daoju_chongzhi_num<=0"
										mode="widthFix" 
										class="daoju_video" 
										src="../../static/images/advideo.png"></image>
								<image 	mode="widthFix" 
										class="daoju" 
										src="../../static/images/chongzhi.png"></image>
							</view>
						</button>
						
					</view>
				</view>
			</view>
		</view>
		
		<view class="gamebox flex flex_ac w100 flex_wrap mt30 prel">
			<view v-show="is_texiao" class="texiao1 flex flex_ac flex_jc w100">
				<image mode="widthFix"
					:src="texiaoimg"></image>
			</view>
			<view v-show="is_boom||is_shuazi" class="daojutips">{{daoju_tips}}</view>
			<view 	v-show="show_shuazi_box" 
					class="shuazi_box flex flex_jsa"
					:style="{bottom:shuazi_box_b+'rpx',left:shuazi_box_l+'rpx'}">
				<image 	v-for="(item,index) in shuazi_box_list"  
						mode="widthFix" 
						@click="starColorChange(item)"
						:src="'/static/images/start/'+item+'.png'"
				></image>
			</view>
			<view 	v-show="show_boom" 
					:style="{bottom:boom_b+'rpx',left:boom_l+'rpx'}"
					class="bomb">
				<image mode="widthFix" src="../../static/images/boom.png"></image>
			</view>
			<view class="blocks">
				<view class="row" v-for="(item,index) in startBox">
					<button
						hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						v-show="item2!=null"
						v-for="(item2,index2) in item" 
						:style="{ bottom:item2.sbtm+'rpx',left:item2.sleft+'rpx',display:item2.show,
							backgroundImage: 'url(' +item2.bg + ')'}"
						:class="item2.trans&&item2.star_choose&&star_scale?'trans startchoose star_scale'
							:item2.trans&&item2.star_choose?'trans startchoose'
							:item2.trans&&star_scale?'trans star_scale'
							:item2.star_choose&&star_scale?'startchoose star_scale'
							:item2.trans?'trans'
							:item2.star_choose?'startchoose'
							:star_scale?'star_scale':''"
						@click="startClick(item2,index,index2)"
						class="start flex flex_ac flex_jc">
					</button>
				</view>
			</view>
		</view>

		
		<u-popup :closeOnClickOverlay="false" mode="center" :round="10" :show="pass_window_show">
			<view class="flex flex_wrap flex_jc prel">
				<view class="setting_window flex flex_jc prel flex_wrap">
					<view class="w100 flex flex_jc prel flex_wrap">
						<image class="w100" mode="widthFix" src="../../static/images/setting/bg2.png"></image>
						<view class="w100 h1000 pab flex flex_jc flex_wrap">
							<image v-show="is_pass" class="title" mode="widthFix" src="../../static/images/setting/suc.png"></image>
							<image v-show="!is_pass" class="title" mode="widthFix" src="../../static/images/setting/fail.png"></image>
							<view class="w100 flex flex_jc flex_wrap">
								<image class="defen" mode="widthFix" src="../../static/images/setting/defen.png"></image>
								<view class="w100 txt_c p_score w100 txt_c">
								<!-- {{passScore}} -->
								<zmxy-number-roller :number="passScore" color="white" size="100" unit="rpx" />
								</view>
							</view>
							<view style="width: 80%;" class="flex prel flex_jsb">
								<button  
									hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
									@click="restart()" style="width: 45%;" class="prel">
									<image class="w100" mode="widthFix" src="../../static/images/setting/chongwanbenguan.png"></image>
								</button>
								
								<button
									v-show="!is_pass" @click="start()"
									hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
									style="width: 45%;" class="prel">
									<image class="w100" mode="widthFix" src="../../static/images/setting/chongxinkaishi.png"></image>
								</button>
								
								<button
									v-show="is_pass" @click="nextPass()"
									hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
									style="width: 45%;" class="prel">
									<image class="w100" mode="widthFix" src="../../static/images/setting/next.png"></image>
								</button>
							</view>
							
							<view style="width: 80%;" class="flex flex_jc">
								<button
									@click="doubleScore()"
									hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
									style="width: 45%;" class="prel">
									<image class="w100" mode="widthFix" src="../../static/images/setting/shuangbeidefen.png"></image>
								</button>
							</view>
						</view>
					</view>
					<button 
						@click="tuijian_window_open('pass')"
						hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						class="moregame flex flex_jc flex_wrap">
						<image mode="widthFix" class="shoub" src="../../static/images/setting/shouping.png"></image>
						<image mode="widthFix" class="moregameword" src="../../static/images/setting/moreganme.png"></image>
					</button>
				</view>
				<ad :unit-id="xcx_ad.banner" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
			</view>
		</u-popup>
		
		
		<u-popup :closeOnClickOverlay="false" mode="center" :round="10" :show="setting_window_show">
			<view class="flex flex_jc prel flex_wrap">
				<view class="setting_window flex flex_jc prel flex_wrap">
					<button class="close prel"
						hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						@click="setting_window_close()">
						<image class="w100" mode="widthFix" src="../../static/images/setting/close.png"></image>
					</button>
					<view class="w100 flex flex_jc prel flex_wrap">
						<image class="w100" mode="widthFix" src="../../static/images/setting/bg2.png"></image>
						<view class="w100 h1000 pab flex flex_jc flex_wrap">
							<image class="title" mode="widthFix" src="../../static/images/setting/title.png"></image>
							<view class="w100 flex flex_wrap flex_jc" style="margin-bottom: 40rpx;">
								<view class="music_b_box prel flex flex_ac">
									<image class="w100 music_b" mode="widthFix" src="../../static/images/setting/music_b.png"></image>
									<view class="pab w100 h1000 flex flex_ac">
										<image class="font ml20 mr10" mode="widthFix" src="../../static/images/setting/yinyue.png"></image>
										<image class="on ml20" mode="widthFix" src="../../static/images/setting/on2.png"></image>
										<view class="flex flex_ac prel"> 
											<image style="width: 150rpx;" mode="widthFix" src="../../static/images/setting/kaiguan_b.png"></image>
											<view class="pab t0 l0 w100 h1000 flex flex_ac" :class="yinyue_kaiguan?'':'flex_jr'">
												<image @click="yinyue_btn()" mode="widthFix" class="mbtn" src="../../static/images/setting/mbtn.png"></image>
											</view>
										</view>
										<image class="on ml20" mode="widthFix" src="../../static/images/setting/off1.png"></image>
									</view>
								</view>
								
								<view class="music_b_box prel flex flex_ac">
									<image class="w100 music_b" mode="widthFix" src="../../static/images/setting/music_b.png"></image>
									<view class="pab w100 h1000 flex flex_ac">
										<image class="font ml20 mr10" mode="widthFix" src="../../static/images/setting/yinxiao.png"></image>
										<image class="on ml20" mode="widthFix" src="../../static/images/setting/on2.png"></image>
										<view class="flex flex_ac prel"> 
											<image style="width: 150rpx;" mode="widthFix" src="../../static/images/setting/kaiguan_b.png"></image>
											<view class="pab t0 l0 w100 h1000 flex flex_ac" :class="yinxiao_kaiguan?'':'flex_jr'">
												<image @click="yinxiao_btn()" mode="widthFix" class="mbtn" src="../../static/images/setting/mbtn.png"></image>
											</view>
										</view>
										<image class="on ml20" mode="widthFix" src="../../static/images/setting/off1.png"></image>
									</view>
								</view>
								
								<view style="width: 80%;" class="flex prel flex_jsb">
									<button
										hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
										@click="restart()" style="width: 45%;" class="prel">
										<image style="width: 100%;" mode="widthFix" src="../../static/images/setting/chongwanbenguan.png"></image>
									</button>
									
									<button
										hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
										@click="start()" style="width: 45%;" class="prel">
										<image style="width: 100%;" mode="widthFix" src="../../static/images/setting/chongxinkaishi.png"></image>
									</button>
								</view>
								
								<view style="width: 80%;" class="flex flex_jc">
									<button
										hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
										@click="gopage('/pages/index/index')"  style="width: 45%;" class="prel">
										<image style="width: 100%;" mode="widthFix" src="../../static/images/setting/home.png"></image>
									</button>
								</view>
							</view>
						</view>
					</view>
					<button @click="tuijian_window_open('setting')"
						hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						class="moregame flex flex_jc flex_wrap">
						<image mode="widthFix" class="shoub" src="../../static/images/setting/shouping.png"></image>
						<image mode="widthFix" class="moregameword" src="../../static/images/setting/moreganme.png"></image>
					</button>
				</view>
				<ad :unit-id="xcx_ad.banner" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
			</view>
		</u-popup>
		
		<u-popup :closeOnClickOverlay="false" mode="center" :round="10" :show="tuijian_window_show">
			<view class="flex flex_jc prel flex_wrap">
				<view class="setting_window tujian_window flex flex_jc prel flex_wrap">
					<button class="close prel"
						hoverClass="btn-click" hoverStartTime="0" hoverStayTime="100"
						@click="tuijian_window_close()">
						<image class="w100" mode="widthFix" src="../../static/images/setting/close.png"></image>
					</button>
					
					<view class="w100 flex flex_jc prel flex_wrap">
						<image class="w100" mode="widthFix" src="../../static/images/setting/bg2.png"></image>
						<view class="w100 h1000 pab flex flex_wrap flex_jsa">
							<image class="title" mode="widthFix" src="../../static/images/setting/moretuijian.png"></image>
							<view class="tuijianli_box flex flex_wrap flex_jsa">
								<view @click="tuijianxcxJump(item)" class="tuijianli" v-for="(item,index) in recommend_xcx">
									<image mode="widthFix" class="w100"
										:src="item.head_img"></image>
									<view class="fz25 word w100 txt_c hidden1">{{item.name}}</view>	
								</view>
							</view>
						</view>
					</view>
				</view>
				<ad v-show="show_ad" :unit-id="xcx_ad.banner" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
			</view>
		</u-popup>
		
		<view class="w100 mt20 prel" style="z-index: 2;" v-show="show_ad&&ad=='banner'">
			<ad v-show="ad=='banner'" :unit-id="xcx_ad.banner" bindload="adLoad" binderror="adError" bindclose="adClose"></ad>
		</view>
		<view class="w100 mt20 prel" style="z-index: 2;" v-show="show_ad&&ad=='video'">
			<ad :unit-id="xcx_ad.video" ad-type="video" ad-theme="white" v-show="false"></ad>
		</view>
	</view>
</template>

<script>
	import {getRecommendXcx} from "@/api/api"
	import {playSound} from "@/utils/common.js"
	import utils from "../../utils/music.js"
    export default {
        data() {
            return {
				
				startBox:[],
				xiaochuArray:[],
				startCol:10,
				startRow:10,
				is_texiao:false,
				texiaoimg:'',
				targetScore:0,
				totalScore:0,
				//关卡开始分数
				passBeginScore:0,
				//关卡得分
				passScore:0,
				pass:1,
				pass_window_show:false,
				pass_img:'',
				is_pass:false,
				is_click:false,
				daoju_tips:'',
				//使用刷子道具
				is_shuazi:false,
				//显示刷子盒
				show_shuazi_box:false,
				daoju_shuazi_num:3,
				//刷子盒位置
				shuazi_box_b:0,
				shuazi_box_l:0,
				shuazi_box_list:[],
				//使用炸弹
				is_boom:false,
				show_boom:false,
				boom_l:0,
				boom_b:0,
				daoju_boom_num:3,
				star_scale:false,
				greate_score:0,
				greate2_line_p:0,
				daoju_chongzhi_num:3,
				setting_window_show:false,
				yinyue_kaiguan:true,
				yinxiao_kaiguan:true,
				double_score:true,
				tuijian_window_show:false,
				tuijian_open_type:'',
				recommend_xcx:getApp().globalData.recommend_xcx,
				xcx_ad:getApp().globalData.xcx_ad,
				show_ad:getApp().globalData.show_ad,
				ad:'',
            }
        },
		onShareAppMessage(e) {
		},
		onShareTimeline(e) {
		},
		onUnload(){
			utils.stopAudios()
		},
		onLoad(options){
			var that = this
			//获取手机分辨率
			uni.getSystemInfo({
				success(res) {
					
					let billi = res.windowHeight/res.windowWidth
					if(billi>1.9){
						that.ad = 'video'
					}else{
						that.ad = 'banner'
					}
				}
			})
			
			if(uni.getStorageSync('pass')){
				this.pass = uni.getStorageSync('pass')
			}
			
			if(uni.getStorageSync('passBeginScore')){
				this.passBeginScore = uni.getStorageSync('passBeginScore')
			}
			
			if(uni.getStorageSync('totalScore')){
				this.totalScore = uni.getStorageSync('totalScore')
			}
			
			if(uni.getStorageSync('greate_score')){
				this.greate_score = uni.getStorageSync('greate_score')
				this.greate2_line_p = this.totalScore/this.greate_score*100
			}
			
			if(uni.getStorageSync('targetScore')){
				this.targetScore = uni.getStorageSync('targetScore')
			}else{
				this.setPass()
			}
			
			if(uni.getStorageSync('daoju_chongzhi_num')){
				this.daoju_chongzhi_num = uni.getStorageSync('daoju_chongzhi_num')
			}
			
			if(uni.getStorageSync('daoju_boom_num')){
				this.daoju_boom_num = uni.getStorageSync('daoju_boom_num')
			}
			
			if(uni.getStorageSync('daoju_shuazi_num')){
				this.daoju_shuazi_num = uni.getStorageSync('daoju_shuazi_num')
			}
			
			if(uni.getStorageSync('yinxiao_kaiguan')){
				let kaiguan = uni.getStorageSync('yinxiao_kaiguan')
				if(kaiguan=='on'){
					this.yinxiao_kaiguan = true
				}else if(kaiguan=='off'){
					this.yinxiao_kaiguan = false
				}
			}
			
			
			if(uni.getStorageSync('yinyue_kaiguan')){
				let kaiguan = uni.getStorageSync('yinyue_kaiguan')
				if(kaiguan=='on'){
					this.yinyue_kaiguan = true
				}else if(kaiguan=='off'){
					this.yinyue_kaiguan = false
				}
			}
			
			this.yinyue_music()
			
			this.createSrart()
		},
		
		methods:{
			
			adLoad() {
			    console.log('Banner 广告加载成功')
			},
			adError(err) {
			    console.error('Banner 广告加载失败', err)
			},
			adClose() {
			    console.log('Banner 广告关闭')
			},
			
			tuijianxcxJump(item){
				wx.navigateToMiniProgram({
					appId: item.appid,
					path: item.path,
				})
			},
			
			tuijian_window_close(){
				this.tuijian_window_show = false
				if(this.tuijian_open_type=='setting'){
					this.setting_window_open()
				}else if(this.tuijian_open_type=='pass'){
					this.pass_window_open()
				}
			},
			
			tuijian_window_open(type){
				this.tuijian_open_type = type
				if(this.recommend_xcx.length==0){
					getRecommendXcx().then(res=>{
						if(res.code==0){
							this.recommend_xcx = res.data.list
							if(this.recommend_xcx.length>0){
								getApp().globalData.recommend_xcx = res.data.list
								if(this.tuijian_open_type=='setting'){
									this.setting_window_close()
								}else if(this.tuijian_open_type=='pass'){
									this.pass_window_close()
								}
								this.tuijian_window_show = true
							}else{
								this.msg('暂无推荐')
							}
						}
					})
				}else{
					if(this.tuijian_open_type=='setting'){
						this.setting_window_close()
					}else if(this.tuijian_open_type=='pass'){
						this.pass_window_close()
					}
					this.tuijian_window_show = true
				}
			},
			
			doubleScore(){
				if(this.double_score){
					this.jiliAd('doubleScore2','观看完激励视频后可以获得双倍过关得分哦')
				}
			},
			
			doubleScore2(){
				this.double_score = false
				this.totalScore = this.totalScore+this.passScore
				if(this.totalScore>this.targetScore){
					this.is_pass = true
				}
				this.passScore = this.passScore*2
			},
			
			gopage(path){
				uni.redirectTo({
					url: path,
				})
			},
			
			yinyue_btn(){
				this.yinyue_kaiguan = !this.yinyue_kaiguan
				
				if(this.yinyue_kaiguan){
					uni.setStorageSync('yinyue_kaiguan','on')
				}else{
					uni.setStorageSync('yinyue_kaiguan','off')
				}
				this.yinyue_music()
				
			},
			yinyue_music(){
				if(this.yinyue_kaiguan){
					utils.playAudios('/static/music/start/bg.mp3',true)
				}else{
					utils.stopAudios()
				}
			},
			
			yinxiao_btn(){
				this.yinxiao_kaiguan = !this.yinxiao_kaiguan
				if(this.yinxiao_kaiguan){
					uni.setStorageSync('yinxiao_kaiguan','on')
				}else{
					uni.setStorageSync('yinxiao_kaiguan','off')
				}
			},
			
			setting_window_close(){
				this.setting_window_show = false
			},
			
			setting_window_open(){
				this.setting_window_show = true
			},
			
			useChongzhi(){
				if(!this.star_scale){
					if(this.daoju_chongzhi_num>0){
						this.useChongzhi2()
					}else{
						//看视频
						this.jiliAd('useChongzhi2','观看完激励视频后可以获得重置道具哦')
					}
				}
			},
			
			useChongzhi2(){
				var that = this
				that.daoju_chongzhi_num--
				that.is_click = true
				that.star_scale = true
				setTimeout(function(){
					for (var i = 0 ; i < that.startRow ; i ++) {
						for (var j = 0 ; j < that.startCol ; j ++) {
							if (that.startBox[j][i] != null) {
								let rand = Math.floor(Math.random()*5)
								let img = '/static/images/start/'+rand+'.png'
								let base64Url = ''
								let imgBase64 = uni.getFileSystemManager().readFileSync(img, 'base64')
								base64Url = `data:image/png;base64,${imgBase64}`
								that.startBox[j][i].num = rand
								that.startBox[j][i].bg = base64Url
							}
						}
					}
				},1000);
				setTimeout(function(){
					that.is_click = false
					that.star_scale = false
				},2000);
			},
			
			jiliAd(fun,msg){
				var that =this
				// 在页面中定义激励视频广告
				let videoAd = null
				// 在页面onLoad回调事件中创建激励视频广告实例
				if (wx.createRewardedVideoAd) {
				  videoAd = wx.createRewardedVideoAd({
				    adUnitId: that.xcx_ad.jili
				  })
				  videoAd.onLoad(() => {})
				  videoAd.onError((err) => {})
				  videoAd.onClose((res) => {
					  if(res&&res.isEnded){
						  that[fun]()
					  }else{
						  that.msg(msg)
						  
					  }
				  })
				}
				// 用户触发广告后，显示激励视频广告
				if (videoAd) {
				  videoAd.show().catch(() => {
				    // 失败重试
				    videoAd.load()
				      .then(() => videoAd.show())
				      .catch(err => {
						console.log(err)
				        console.log('激励视频 广告显示失败')
						that[fun]()
				      })
				  })
				}
			},
			
			useBoom(){
				if(this.daoju_boom_num>0){
					this.useBoom2()
				}else{
					//看视频
					this.jiliAd('useBoom2','观看完激励视频后可以获得炸弹道具哦')
				}
			},
			
			
			useBoom2(){
				this.show_shuazi_box = false
				this.is_shuazi = false
				this.is_boom = !this.is_boom
				for (var i = 0 ; i < this.startRow ; i ++) {
					for (var j = 0 ; j < this.startCol ; j ++) {
						if (this.startBox[j][i] != null) {
							this.startBox[j][i].star_choose = false
						}
					}
				}
				if(this.is_boom){
					this.daoju_tips ='请选择需要炸毁的模块'
				}
			},
			
			starColorChange(num){
				let is_choose =false
				for (var i = 0 ; i < this.startRow ; i ++) {
					for (var j = 0 ; j < this.startCol ; j ++) {
						if (this.startBox[j][i] != null){
							 if(this.startBox[j][i].star_choose){
								let img = '/static/images/start/'+num+'.png'
								let base64Url = ''
								let imgBase64 = uni.getFileSystemManager().readFileSync(img, 'base64')
								base64Url = `data:image/png;base64,${imgBase64}`
								this.startBox[j][i].num = num
								this.startBox[j][i].bg = base64Url
								this.show_shuazi_box = false
								this.is_shuazi = false
								is_choose = true
								break
							}
						}
					}
					if(is_choose){
						this.daoju_shuazi_num--
						break
					}
				}
			},
			
			useShuazi(){
				if(this.daoju_shuazi_num>0){
					this.useShuazi2()
				}else{
					//看视频
					this.jiliAd('useShuazi2','观看完激励视频后可以获得刷子道具哦')
				}
			},
			
			useShuazi2(){
				this.is_boom = false
				this.is_shuazi = !this.is_shuazi
				
				for (var i = 0 ; i < this.startRow ; i ++) {
					for (var j = 0 ; j < this.startCol ; j ++) {
						if (this.startBox[j][i] != null) {
							this.startBox[j][i].star_choose = false
						}
					}
				}
				
				if(!this.is_shuazi){
					this.show_shuazi_box = false
				}else{
					this.daoju_tips ='请选择需要变色的模块'
				}
			},
			
		
			
			back(){
				const pages = getCurrentPages();
				console.log(pages.length)
				if (pages.length === 2) {
					console.log('back1')
					uni.navigateBack({
						delta: 1
					});
				} else if (pages.length === 1) {
					console.log('back2')
					uni.redirectTo({
						url: '/pages/index/index',
					})
				} else if(pages.length > 1) {
					console.log('back3')
					uni.navigateBack({
						delta: 1
					});
				}else{
					console.log('back4')
					uni.redirectTo({
						url: '/pages/index/index',
					})
				}
			},
			
			//重新开始
			start(){
				this.totalScore = 0
				this.passBeginScore = 0
				this.pass = 1
				this.targetScore = 0
				uni.setStorageSync('pass',this.pass)
				uni.setStorageSync('passBeginScore',this.passBeginScore)
				uni.setStorageSync('totalScore',this.totalScore)
				uni.setStorageSync('targetScore',this.targetScore)
				this.setPass()
				this.startSet()
				
			},
			startSet(){
				this.double_score = true
				this.pass_window_close()
				this.setting_window_close()
				this.createSrart()
			},
			//重玩本关
			restart(){
				this.totalScore = this.passBeginScore
				this.startSet()
			},
			
			nextPass(){
				this.pass++
				this.passBeginScore = this.totalScore
				uni.setStorageSync('pass',this.pass)
				uni.setStorageSync('passBeginScore',this.passBeginScore)
				uni.setStorageSync('totalScore',this.totalScore)
				this.double_score = true
				this.setPass()
				this.startSet()
			},
			
			pass_window_open(){
				this.pass_window_show = true	
			},
			
			pass_window_close(){
				this.pass_window_show = false	
			},
			
			startClick(item,index,index2){
				var that = this
				if(!that.is_click){
					//判断是否使用了道具
					//是否使用了炸弹
					if(that.is_boom){
						//再点一次，看看是不是使用炸弹
						if(item.star_choose){
							//连续点击
							that.xiaochuArray = []
							for (var i = 0 ; i < that.startRow ; i ++) {
								for (var j = 0 ; j < that.startCol ; j ++) {
									if (that.startBox[j][i] != null) {
										if(that.startBox[j][i].star_choose){
											that.xiaochuArray.push(that.startBox[j][i])
										}
									}
								}
							}
							
							that.show_boom = true
							setTimeout(function(){
								that.show_boom = false
								//去消除
								that.startClick2()
								that.is_boom = !that.is_boom
								that.daoju_boom_num--
							},1000);
							
							return
						}
						
						for (var i = 0 ; i < that.startRow ; i ++) {
							for (var j = 0 ; j < that.startCol ; j ++) {
								if (that.startBox[j][i] != null) {
									that.startBox[j][i].star_choose = false
								}
							}
						}
						that.boom_l = item.sleft
						that.boom_b = item.sbtm
						//自己
						that.startBox[item.row][item.col].star_choose = true
						
						//向左
						if(item.col>0&&that.startBox[item.row][item.col-1]){
							console.log('向左')
							that.startBox[item.row][item.col-1].star_choose = true
						}
						
						//向左上
						if(item.col>0&&item.row<that.startRow-1&&that.startBox[item.row+1][item.col-1]){
							console.log('向左上')
							that.startBox[item.row+1][item.col-1].star_choose = true
						}
						
						//向右
						if(item.col<that.startCol-1&&that.startBox[item.row][item.col+1]){
							console.log('向右')
							that.startBox[item.row][item.col+1].star_choose = true
						}
						
						//向右上
						if(item.col<that.startCol-1&&item.row<that.startRow-1
							&&that.startBox[item.row+1][item.col+1]){
							console.log('向右上')
							that.startBox[item.row+1][item.col+1].star_choose = true
						}
						
						//向上
						if(item.row<that.startRow-1&&that.startBox[item.row+1][item.col]){
							console.log('向上')
							that.startBox[item.row+1][item.col].star_choose = true
						}
						
						//向下
						if(item.row>0&&that.startBox[item.row-1][item.col]){
							console.log('向下')
							that.startBox[item.row-1][item.col].star_choose = true
						}
						
						//向左下
						if(item.col>0&&item.row>0&&that.startBox[item.row-1][item.col-1]){
							console.log('向左下')
							that.startBox[item.row-1][item.col-1].star_choose = true
						}
						
						//向右下
						if(item.col<that.startCol-1&&item.row>0
							&&that.startBox[item.row-1][item.col+1]){
							console.log('向右下')
							that.startBox[item.row-1][item.col+1].star_choose = true
						}
						return
					}
					//是否使用了刷子
					if(that.is_shuazi){
						for (var i = 0 ; i < that.startRow ; i ++) {
							for (var j = 0 ; j < that.startCol ; j ++) {
								if (that.startBox[j][i] != null) {
									that.startBox[j][i].star_choose = false
								}
							}
						}
						
						that.shuazi_box_b = item.sbtm+100
						if(item.sleft-137.5<0){
							that.shuazi_box_l = 0
						}else if(item.sleft-137.5>400){
							that.shuazi_box_l = 400
						}else{
							that.shuazi_box_l = item.sleft-137.5
						}
						
						that.startBox[index][index2].star_choose = true
						//处理shuazi_box_list
						that.shuazi_box_list = []
						for(let i = 0 ;i<5;i++){
							if(i!=item.num){
								that.shuazi_box_list.push(i)
							}else{
								console.log(i)
							}
						}
						that.show_shuazi_box = true
						return
					}
					
					that.xiaochuArray = []
					that.xiaochu(item)
					that.startClick2()
				}
			},
			
			startClick2(){
				var that = this
				if(that.xiaochuArray.length>1){
					that.is_click = true
					that.totalScore += that.xiaochuArray.length * that.xiaochuArray.length * 5
					
					//保存最高分
					if(that.totalScore>that.greate_score){
						that.greate_score = that.totalScore
						uni.setStorageSync('greate_score',that.greate_score)
					}
					let p = that.totalScore/that.greate_score
					if(p>=1){
						that.greate2_line_p = 100
					}else{
						that.greate2_line_p = p*100
					}
					
					if(that.yinxiao_kaiguan){
						playSound('/static/music/start/xiao.mp3')
					}
					if(that.xiaochuArray.length>5){
						if(that.yinxiao_kaiguan){
							playSound('/static/music/start/amazing.mp3')
						}
						that.texiaoimg = '../../static/images/start/amazing.png'
						that.is_texiao =true
					}else if(that.xiaochuArray.length>4){
						if(that.yinxiao_kaiguan){
							playSound('/static/music/start/excellent.mp3')
						}
						that.texiaoimg = '../../static/images/start/nice.png'
						that.is_texiao =true
					}else if(that.xiaochuArray.length>3){
						if(that.yinxiao_kaiguan){
							playSound('/static/music/start/greate.mp3')
						}
						that.texiaoimg = '../../static/images/start/cool.png'
						that.is_texiao =true
					}else if(that.xiaochuArray.length>2){
						if(that.yinxiao_kaiguan){
							playSound('/static/music/start/good.mp3')
						}
						that.texiaoimg = '../../static/images/start/good.png'
						that.is_texiao =true
					}
					
					setTimeout(function(){
						that.is_texiao = false
					},1000);
					
					for(let i = 0 ; i<that.xiaochuArray.length;i++){
						(function(i){
							setTimeout(function(){
								that.startBox[that.xiaochuArray[i].row][that.xiaochuArray[i].col].show = 'none' ;
								that.startBox[that.xiaochuArray[i].row][that.xiaochuArray[i].col] = null ;
							},i*100);
						})(i);
					}
					//移动
					setTimeout(function(){
						that.move();
					},that.xiaochuArray.length * 100);
					
				}else{
					return
				}
			},
			
			move(){
				for (var i = 0 ; i < this.startRow ; i ++) {
					var pointer = 0;//pointer指向小方块，当遇到null的时候停止，等待上面的小方块落到这里来
					for (var j = 0 ; j < this.startCol ; j ++) {
						if (this.startBox[j][i] != null) {
							if (j != pointer) {
								this.startBox[pointer][i] = this.startBox[j][i];
								this.startBox[j][i] = null;
							}
							pointer ++;
						}
					}
				}
				//横向移动
				for (let i = 0 ; i < this.startBox[0].length ; ){
					if (this.startBox[0][i] == null) {
						for (let j = 0 ; j < this.startCol ; j ++) {
							this.startBox[j].splice(i, 1);
						}
						continue;
					}
					i ++;
				}
				this.refresh();
			},
			
			refresh(){
				//前面已经重新排序了，所以重新渲染位置直接到下面了
				for(let i = 0 ; i < this.startBox.length ; i ++){
					for (let j = 0 ; j < this.startBox[i].length ; j++) {
						//严谨判断
						if (this.startBox[i][j] == null) {
							continue;
						}
						//将二维数组里面的小方块对应面板的行和列显示
						this.startBox[i][j].trans 		= false, 
						this.startBox[i][j].row 		= i;
						this.startBox[i][j].col 		= j;
					}
				}
				var that = this
				setTimeout(function(){
					that.refresh2()
				},100);
			},
			
			refresh2(){
				//前面已经重新排序了，所以重新渲染位置直接到下面了
				for(let i = 0 ; i < this.startBox.length ; i ++){
					for (let j = 0 ; j < this.startBox[i].length ; j++) {
						if (this.startBox[i][j] == null) {
							continue;
						}
						this.startBox[i][j].trans 		= true
						this.startBox[i][j].sbtm 		= i*75;
						this.startBox[i][j].sleft 		= j*75;
						this.startBox[i][j].is_choose 	= this.startBox[i][j].is_choose
					}
				}
				var that = this
				setTimeout(function(){
					that.is_click = false
				},300);
				
				//判断是否结束了
				let status = this.isFinish()
				if(status){
					//结束了，做结束的操作
					//判断是否过关
					if(this.totalScore>=this.targetScore){
						//过关
						this.is_pass = true
					}else{
						//没过关
						this.is_pass = false
					}
					this.passScore = this.totalScore - this.passBeginScore
					this.removeStart()
				}
			},
			
			isFinish(){
				for (let i = 0 ; i < this.startBox.length ; i++){
					for (let j = 0 ; j < this.startBox[i].length ; j++) {
						//判断周围是否还有可消除的方块
						if(this.startBox[i][j]!=null){
							console.log('判断结束')
							this.xiaochuArray = []
							this.xiaochu(this.startBox[i][j]);
							if(this.xiaochuArray.length > 1){
								return false ;
							}
						}
					}
				}
				return true;
			},
			
			removeStart(){
				var that = this
				let num = 0
				for (let i = 0 ; i < this.startBox.length ; i++) {
					for (let j = 0 ; j < this.startBox[i].length ; j++) {
						//判断周围是否还有可消除的方块
						if(this.startBox[i][j]!=null){
							num++
							(function(j){
								setTimeout(function(){
									that.startBox[i][j].show = 'none' ;
									that.startBox[i][j] = null ;
								},j*100);
							})(j);
						}
					}
				}
				this.pass_window_open()
			},
			
			xiaochu(item){
				if(item == null){
					return;
				}
				this.xiaochuArray.push(item)
				//向左
				if(item.col>0&&this.startBox[item.row][item.col-1]
					&&this.startBox[item.row][item.col-1].num==item.num
					&&this.xiaochuArray.indexOf(this.startBox[item.row][item.col-1]) ==-1){
						console.log('向左')
						this.xiaochu(this.startBox[item.row][item.col-1])
				}
				
				//向右
				if(item.col<this.startCol-1&&this.startBox[item.row][item.col+1]
					&&this.startBox[item.row][item.col+1].num==item.num
					&&this.xiaochuArray.indexOf(this.startBox[item.row][item.col+1]) ==-1 ){
						console.log('向右')
						this.xiaochu(this.startBox[item.row][item.col+1])
				}
				
				//向上
				if(item.row<this.startRow-1&&this.startBox[item.row+1][item.col]
					&&this.startBox[item.row+1][item.col].num==item.num
					&&this.xiaochuArray.indexOf(this.startBox[item.row+1][item.col]) ==-1){
						console.log('向上')
						this.xiaochu(this.startBox[item.row+1][item.col])
				}
				
				//向下
				if(item.row>0&&this.startBox[item.row-1][item.col]
					&&this.startBox[item.row-1][item.col].num==item.num
					&&this.xiaochuArray.indexOf(this.startBox[item.row-1][item.col]) ==-1){
						console.log('向下')
						this.xiaochu(this.startBox[item.row-1][item.col])
				}
			},
			
			createSrart(){
				let row = new Array(this.startRow)
				for(let i = 0; i<row.length;i++){
					row[i] = new Array(this.startCol)
					for (let j = 0; j<row[i].length;j++){
						let rand = Math.floor(Math.random()*5)
						let img = '/static/images/start/'+rand+'.png'
						let base64Url = ''
						let imgBase64 = uni.getFileSystemManager().readFileSync(img, 'base64')
						base64Url = `data:image/png;base64,${imgBase64}`
						let data = {
							num : rand,
							row : i,
							col : j,
							sbtm:i*75,
							sleft:j*75,
							trans : false,
							bg:base64Url,
							show:'inline-block',
							star_choose:false
						}
						row[i][j] = data
					}
				}
				this.startBox = row
			},
			setPass(){
				this.targetScore = this.targetScore + this.pass*1000
				uni.setStorageSync('targetScore',this.targetScore)
			},
			msg(msg){
				uni.showToast({
					title: msg,
					icon:'none'
				});
			},
		}
    }
</script>
<style>
	page{background-color: #14325E;}
	.u-popup__content{background-color: transparent!important;}
</style>
<style lang="scss">
	.bg{width: 750rpx;position: absolute;top: 0%;left: 0;}
	.body{min-height: 100vh;overflow: hidden;}
	.tujian_window{width: 600rpx!important;}
	.tuijianli .word{color:#fff}
	.tuijianli{width: 170rpx;height: 220rpx;overflow: hidden;
		border: 5rpx solid #03a9f4;border-radius: 20rpx;box-sizing: border-box;}
	.tuijianli_box{width: 560rpx;margin-top: -55rpx;}
	.sharetxt{font-weight: bold;font-style: italic;padding-right: 10rpx;font-size: 30rpx;}
	.share{width: 100%;height: 100%;border: 1px solid #fff;color: #fff;
		border-radius: 50rpx!important;background-color: transparent;}
	.share_box{height: 70rpx;width: 255rpx;}
	
	.number-roller-column text{font-weight: bold;text-shadow: 1px 1px black;}
	.setting_window .defen{width: 150rpx;}
	.moregame .moregameword{width: 150rpx;}
	.moregame .shoub{width: 100rpx;margin-top: -55rpx;animation: moreGameIcon 2s infinite}
	.moregame{width: 180rpx;margin-top: 60rpx;background:linear-gradient(to bottom,rgb(141,233,255),
		rgb(82,127,247));border: 5rpx solid rgb(8,207,252);
		padding-bottom: 10rpx;border-radius: 20rpx!important;}
	.setting_window .close{position: absolute;right: -25rpx;top: -60rpx;width: 60rpx;}
	.setting_window .mbtn{width: 50rpx;margin: 0 10rpx;}
	.setting_window .on{width: 10%;margin: 0 10rpx;}
	.setting_window .font{width: 25%;}
	.setting_window .music_b_box{width: 80%;}
	.setting_window .title{width:80%;margin-top: -50rpx;z-index: 2;}
	.setting_window{width: 500rpx;
		border-radius: 30rpx;
	}
	.daoju_video{position: absolute;top: -5rpx;right: -10rpx;width: 40rpx;height: 40rpx;}
	.daoju_box{width: 80rpx;height: 80rpx;}
	.daoju_num{position: absolute;top: -5rpx;right: -5rpx;width: 40rpx;height: 40rpx;color: #fff;font-size: 25rpx;
		border-radius: 100%;background-color: red;display: flex;align-items: center;justify-content: center;}
	.bomb image{width: 80rpx;}
	.bomb{position: absolute;animation: bomb 1s both;z-index: 2;}
	.startchoose{border: 7rpx solid #fff;box-sizing: border-box;}
	.shuazi_box{border: 10rpx solid #fff;border-radius: 15rpx;background-color: #fff;
		width: 350rpx;z-index: 2;position: absolute;}
	.shuazi_box image{width: 75rpx;}
	.daojutips{width: 100%;position: absolute;top: 0;z-index: 9;font-weight: bold;
		left: 0;text-align: center;color: #fff;font-size: 35rpx;}
	.daoju_list .daoju{width: 80rpx;}
	.daoju_list{width: 410rpx;margin-left: 20rpx;}
	.tool2 .greate_line_box{color: #fff;}
	.tool2 .greate2_line{height: 30rpx;position: absolute;top: 0;left: 0;z-index: 2;background-color: #2196f3;}
	.tool2 .greate_line{width: 100%;height: 30rpx;flex: 1;justify-content: flex-end;overflow: hidden;
		border-radius: 20rpx;border: 1px solid #DA6800;box-sizing: border-box;}
	.tool2 .greate_score{width: 280rpx;}
	.tool2 .total_score{font-size: 40rpx;font-weight: bold;color: #fff;text-shadow: 1px 1px black;}
	.tool2{z-index: 2;}
	.tool1{color: #fff;font-size: 30rpx;font-weight: bold;font-style: italic;z-index: 2;}
	.btnset{width: 60rpx;}
	.p_next{width: 250rpx;height: 80rpx;background-color: #FEBF57;border-radius: 40rpx;color: #fff;}
	.p_score{font-size: 100rpx;font-weight: bold;color: #fff;text-shadow: 1px 1px black;}
	.pass_window{width: 600rpx;padding: 50rpx 0;}
	.trans{transition: left .2s, bottom .2s;}
	.blocks .start{position: absolute;width: 75rpx;height: 75rpx; background-size: 100% 100%;}
	.row{width: 100vw;height: 75rpx;}
	.blocks{position: relative;}
	
	.texiao1{position: fixed;top: 300rpx;z-index: 2;animation: bomb 1s both;}
	.texiao1 image{width: 500rpx;}
	@keyframes bomb {
		0% {
			transform: scale(0, 0);
		}
		60% {
			transform: scale(1, 1) rotate(-3deg);
			opacity: 1;
		}
		70%,73% {
			transform: scale(0.9) rotate(3deg);
		}
		77%,83%,90%,97% {
			transform: scale(1.1) rotate(-3deg);
		}
		80%,87%,93% {
			transform: scale(1.3) rotate(3deg);
			opacity: 1;
		}
		100% {
			transform: scale(10) rotate(0);
			opacity: 0;
			display: none;
		}
	}
	
	button::after{
	 	border: none;
	}
	button{
		border-radius: 0!important;
		margin: 0;
		padding: 0;
		position: relative;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 0;
		-webkit-tap-highlight-color: transparent;
		overflow: inherit;
		background-color: transparent!important;
	}
	
	.star_scale {
		animation: starScale 2s ;
	}
	
	
	@keyframes starScale {
	  0% {
	    transform: scale(1);
	  }
	  50% {
	    transform: scale(0);
	  }
	  100% {
	    transform: scale(1);
	  }
	}
	
	@keyframes scaleAnimation {
	  0% {
	    transform: scale(1);
	  }
	  50% {
	    transform: scale(1.2);
	  }
	  100% {
	    transform: scale(1);
	  }
	}
	 
	/* 应用动画到元素 */
	.scaleElement {
	  animation: scaleAnimation 1s infinite;
	}
	
	//震动
	.tremble {
		animation: trembleAni 1s ;
	}
	
	@keyframes trembleAni {
		0% {
			transform: rotate(0);
		}
		10%,30%,50%,70%,90% {
			transform: rotate(1deg);
		}
		20%,40%,60%,80% {
			transform: rotate(-1deg);
		}
		100% {
			transform: rotate(0);
		}
	}
	
	
	@keyframes moreGameIcon {
	    0% {
	        transform: rotate(0);
	    }
	
	    10% {
	        transform: rotate(10deg);
	    }
	
	    20% {
	        transform: rotate(-10deg);
	    }
	
	    30% {
	        transform: rotate(10deg);
	    }
	
	    40% {
	        transform: rotate(-10deg);
	    }
	
	    50% {
	        transform: rotate(0);
	    }
	
	    100% {
	        transform: rotate(0);
	    }
	}
	
	
	
</style>